<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>音频上传</title>
    <style>
      .content {
        font-size: 30px;
      }
      #audio {
        display: none;
      }
      .selete {
        width: 500px;
        height: 100px;
        /* background-color: #ffffff; */
        color: #1caa6f;
        margin: 0 auto;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        box-sizing: border-box;
        border: 1px solid #1caa6f;
        margin-top: 500px;
      }
      .selete div {
        text-align: center;
      }
      .btn-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: #1caa6f;
        z-index: -1;
      }
    </style>
    <script></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
    <script src="https://unpkg.com/qiniu-js@2.5.5/dist/qiniu.min.js"></script>
  </head>
  <body>
    <div class="content">
      <input type="file" id="audio" />
      <div class="selete" id="btn">
        <div id="btn_1">请选择音频文件</div>
        <div id="btn_2"></div>
        <div class="btn-bg" id="btnBg"></div>
      </div>
    </div>
    <script>
      // accept="audio/mpeg,audio/aac,audio/wav,audio/mp4a-latm,audio/mpeg,audio/flac"
      document.addEventListener("UniAppJSBridgeReady", function () {
        let token = getUrlParam("token");
        let user_id = getUrlParam("user_id");
        let type = 0; //0 未选择文件 1 已选择文件 2上传中 3上传完成
        let btn = document.getElementById("btn");
        let audio = document.getElementById("audio");
        let btnBg = document.getElementById("btnBg");
        let btn_1 = document.getElementById("btn_1");
        let btn_2 = document.getElementById("btn_2");
        btn_1.innerHTML = "请选择音频文件";
        btn_2.innerHTML = "";
        let file;
        btn.onclick = () => {
          if (type == 0) {
            audio.click();
          }
          if (type == 1) {
            upload();
          }
          if (type == 3) {
            uni.navigateBack();
          }
        };
        audio.onchange = (ev) => {
          // 文件选择
          type = 1;
          file = audio.files[0];
          btn_1.innerHTML = file.name;
          btn_2.innerHTML = "点击上传";
        };

        function upload() {
          // let fileKeyArr = file.name.toLowerCase().split(".");
          // let fileType = fileKeyArr[fileKeyArr.length - 1]; //获取文件格式
          let fileKey = String(new Date().getTime()) + user_id + ".mp3";
          let observable = qiniu.upload(file, fileKey, token);
          var observer = {
            next(res) {
              let percent = parseInt(res.total.percent);
              if (percent > 60) {
                btn.style.color = "#FFFFFF";
              }
              btn_2.innerHTML = percent + "%";
              btnBg.style.width = percent + "%";
            },
            error(err) {
              // ...
            },
            complete(res) {
              btn_1.innerHTML = "上传成功";
              btn_2.innerHTML = "点击返回";
              type = 3;
              uni.postMessage({
                data: {
                  url: res,
                },
              });
            },
          };
          observable.subscribe(observer);
        }
      });

      // 获取网页参数
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      }
    </script>
  </body>
</html>
